<template>
    <div class="app-container">
        <div style="margin-bottom: 20px">
            <el-button type="primary" @click="addOpen">添加</el-button>
        </div>
        <el-table :data="list"
                  element-loading-text="Loading"
                  border
                  fit
                  highlight-current-row>
            <el-table-column property="name" label="文档名称"></el-table-column>
            <el-table-column property="envName" label="环境名称"></el-table-column>
            <el-table-column property="projectName" label="项目名称"></el-table-column>
            <el-table-column property="link" label="文档URL">
                <template slot-scope="scope">
                    <el-button plain size="small" @click="opendLink(scope.row.link)">{{scope.row.link}}</el-button>
                </template>
            </el-table-column>
            <el-table-column property="address" label="操作">
                <template slot-scope="scope">
                    <el-button plain size="small" @click="editOpen(scope.row)">编辑</el-button>
                    <el-button plain size="small" @click="detail(scope.row.id)">详情</el-button>
                    <el-button plain size="small" @click="flush(scope.row.id)">刷新</el-button>
                    <el-button plain size="small" @click="publishDoc(scope.row.id)">发布</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="文档表单" :visible.sync="dialogFormVisible">
            <el-form :model="apiDocForm" :rules="validation" ref="formName">
                <el-form-item label="文档名称名称" prop="name" required>
                    <el-input v-model="apiDocForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="项目名称" prop="envName" required>
                    <el-input v-model="apiDocForm.envName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="首页LOGO" prop="icon" required>
                    <el-input v-model="apiDocForm.icon" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="文档路径" prop="path" required>
                    <el-input v-model="apiDocForm.path" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="文档访问的URL" prop="link" required>
                    <el-input v-model="apiDocForm.link" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="摘要" prop="descr" required>
                    <el-input
                            type="textarea"
                            placeholder="请输入内容"
                            v-model="apiDocForm.descr"
                            maxlength="300"
                            show-word-limit
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="详细说明" prop="md">
                    <v-md-editor v-model="apiDocForm.md" height="400px"></v-md-editor>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="sub">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="50%">
            <div style="text-align: center">{{pubMessage}}</div>
            <div ref="scrollContent" style="background-color: #1e1e22;height: 200px;overflow: auto">
                <div v-for="i in content">
                    <span>{{i}}</span><br/>
                </div>

            </div>
        </el-dialog>

    </div>
</template>

<script lang="ts">
    import {Component, Provide, Ref} from 'vue-property-decorator'
    import {ApidocModel} from "@/api/model/ApidocModel";
    import {ToPath} from "@/api/mixins/ToPath";
    import {ElLoadingComponent} from "element-ui/types/loading";
    import {ApiDocComponent} from '@/api/view/apidoc/ApiDocComponent';

    @Component
    export default class ApiDocView extends ApiDocComponent {
        @Provide()
        apiDocForm: ApidocModel = {};
        @Provide()
        listLoading: true;
        @Provide()
        initData: boolean = true;
        @Provide()
        dialogFormVisible: boolean = false;
        @Provide()
        dialogPathFormVisible: boolean = false;
        @Provide()
        isAdd: boolean = true;
        @Provide()
        content: Array<string> = [];
        @Provide()
        pubMessage: string = "";
        @Ref("formName")
        loginForm2: any;
        @Ref("scrollContent")
        scrollContent: HTMLDivElement;

        opendLink(str: string) {
            window.open(str);
        }

        addOpen() {
            this.dialogFormVisible = true;
            this.isAdd = true;
        }

        editOpen(row: ApidocModel) {
            this.apiDocForm = row;
            this.dialogFormVisible = true;
            this.isAdd = false;
        }

        detail(apidoc_id: number) {
            this.dialogPathFormVisible = true;
            ToPath.toPath("/apidoc/apidocPath", {"apidocId": apidoc_id})
        }

        //刷新文档
        flush(id: number) {
            let load = this.loading("正常刷新文档,请稍后....");
            this.getController().flushDoc([id]).then(i => {
                load.close();
                this.$message({
                    message: '刷新文档成功',
                    type: 'success'
                });
            })
        }

        loading(message: string): ElLoadingComponent {
            return this.$loading({
                lock: true,
                text: message,
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
        }

        /**
         * 发布文档
         */
        publishDoc(id: number) {
            this.pubMessage = "正在发布文档,请不要关闭窗口,请稍后....";
            let l = this.loading("正在发布文档,请稍后....");
            this.getController().publishDoc(id).then(i => {
                this.publishSuccess(i.data, l);
                this.dialogVisible = true;
            });
        }

        /**
         * 检测是否发布成功
         * @param id
         * @param l
         */
        publishSuccess(id: string, l: ElLoadingComponent) {
            this.getController().publishSuccess(id).then(i => {
                if (i.data.success) {
                    l.close();
                    this.pubMessage = "发布成功";
                    this.content.push("文档发布成功！！")
                } else {
                    setTimeout(() => {
                        this.publishSuccess(id, l)
                    }, 2000)
                }
                this.content = i.data.content;
                this.scrollContent.scrollTop = this.scrollContent.scrollHeight;
            })
        }

        sub() {
            this.loginForm2.validate(c => {
                if (!c) {
                    return;
                }
                (this.isAdd ? this.getController().insert(this.apiDocForm) : this.getController().update(this.apiDocForm))
                    .then(res => this.getListPage())
                    .then(res => this.loginForm2.resetFields())
                    .then(res => this.dialogFormVisible = false);
            })
        }
    }
</script>
<style>
    .animate {
        padding-left: 20px;
        font-size: 12px;
        color: #000;
        display: inline-block;
        white-space: nowrap;
        animation: 10s wordsLoop linear infinite normal;
    }

    @keyframes wordsLoop {
        0% {
            transform: translateX(200px);
            -webkit-transform: translateX(200px);
        }
        100% {
            transform: translateX(-100%);
            -webkit-transform: translateX(-100%);
        }
    }

    @-webkit-keyframes wordsLoop {
        0% {
            transform: translateX(200px);
            -webkit-transform: translateX(200px);
        }
        100% {
            transform: translateX(-100%);
            -webkit-transform: translateX(-100%);
        }
    }
</style>
